<template>
  <div class="middle">
    <div class="middlebg"></div>
    <div class="top">
      <span class="teacher">上课记录<i class="el-icon-arrow-right"></i></span>
      <span class="back" @click="back">返回</span>
    </div>
    <el-card class="box-card">
      <div class="card">
        <div class="topMsg">
          学年：
          <template>
            <el-select class="class" clearable v-model="yearId" placeholder="请选择学年">
              <el-option v-for="item in yearOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </template>
          班级：
          <template>
            <el-select class="class" clearable v-model="classId" placeholder="请选择班级">
              <el-option v-for="item in classOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </template>
          <el-button type="danger" class="btn" @click="search">搜索</el-button>
        </div>
        <!--表格区域-->
        <el-table ref="singleTable" :data="teacherPlanInfo" highlight-current-row style="width: 100%">
          <el-table-column property="gradeClass" label="班级" width="180" align="center"></el-table-column>
          <el-table-column property="class_time" label="上课日期" width="180" align="center"></el-table-column>
          <el-table-column property="status" label="状态" width="180" align="center"></el-table-column>
          <el-table-column property="course_name" label="上课内容" width="180" align="center"></el-table-column>
          <el-table-column property="batch" label="设备批次" width="180" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="watch(scope.row.id)" type="primary" plain size="mini">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页功能-->
        <el-pagination
          class="fenye"
          @size-change="SizeChange"
          @current-change="currentChange"
          :current-page="page"
          :page-sizes="pagesizes"
          :page-size="rows"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        <!-- 查看页面 -->
        <el-dialog class="record" title="上课记录" :visible.sync="watchEquipment">
          <el-form class="table">
            <div>
              <span class="left">任课老师</span>
              <span class="right">{{teacher_name}}</span>
            </div>
            <div>
              <span class="left">班级</span>
              <span class="right">{{gradeClass}}</span>
            </div>
            <div>
              <span class="left">学年</span>
              <span class="right">{{year}}</span>
            </div>
            <div>
              <span class="left">课时</span>
              <span class="right">1</span>
            </div>
            <div>
              <span class="left">上课日期</span>
              <span class="right">{{class_time}}</span>
            </div>
            <div>
              <span class="left">上课内容</span>
              <span class="right">{{course_name}}</span>
            </div>
            <div>
              <span class="left">设备批次</span>
              <span class="right">{{recordDetail.batch}}</span>
            </div>
            <div>
              <span class="left">应到人数</span>
              <span class="right">{{recordDetail.student_count}}</span>
            </div>
            <div>
              <span class="left">实到人数</span>
              <span class="right">{{recordDetail.true_to_student}}</span>
            </div>
      <!-- <div>
            <span class="left">心率预警</span>
            <span class="right">
              <span>1</span>
            </span>
           </div> -->
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="clock">关 闭</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      yearId: '',
      yearOptions: [],//存放年级
      classId: '',
      classOptions: [],//存放班级
      rows: 6,//每页几条
      page: 1,//当前显示页数
      pagesizes: [6, 10, 15, 20],//更改每页显示条数
      total: 20,//一共多少条,
      teacherPlanInfo: [],//存放课程首页信息
      watchEquipment: false,//查看设备页面默认关闭
      recordDetail: [],//存放上课记录
      teacher_name: '',
      gradeClass: '',
      class_time: '',
      course_name: '',
      year: '',//学年
    }
  },
  methods: {
    //返回上一页
    back () {
      this.$router.push({name: 'teaching'})
    },
    //每页显示条数
    SizeChange (val) {
      this.rows = val
      this.getInfo()
    },
    //切换第几页
    currentChange (val) {
      this.page = val
      this.getInfo()
    },
    //查看设备
    watch (id) {
      this.$http.post('/api/teacher_class_record/recordDetail', {
        id: id
      }).then(res => {
        this.recordDetail = res.data.data
        this.teacher_name = this.recordDetail.get_teacher.teacher_name
        this.gradeClass = this.recordDetail.get_class.get_grade.grade_title + this.recordDetail.get_class.class_name
        this.class_time = this.recordDetail.create_time
        if(this.recordDetail.get_course == null){
          this.course_name = '未备课'
        }else {
          this.course_name = this.recordDetail.get_course.course_name
        }
        if (this.recordDetail.semester == 1) {
          this.year = this.recordDetail.get_school_year.year + '上学期'
        } else if (this.recordDetail.semester == 2) {
          this.year = this.recordDetail.get_school_year.year + '下学期'
        }
      })
      this.watchEquipment = true
    },
    clock () {
      this.watchEquipment = false
    },
    getInfo () {
      this.$http.post('/api/teacher_class_record/getInfo', {
        page: this.page,
        rows: this.rows,
        school_year_id: this.yearId,
        grade_class_id: this.classId,
      }).then(res => {
        this.teacherPlanInfo = res.data.rows
        this.teacherPlanInfo.map(item => {
          item.gradeClass = item.get_class.get_grade.grade_title + item.get_class.class_name
          item.class_time = item.create_time
          item.status = item.status
          if(item.get_course == null){
            item.course_name = '未备课'
          }else {
            item.course_name = item.get_course.course_name
          }
        })
        this.total = res.data.count
      })
    },
    getYearGradeInfo () {
      this.$http.post('/api/teacher_class_record/getSchoolYearGradeInfo')
        .then(res => {
          res.data.grade_class_info.map(item => {
            var obj = {}
            obj.label = item.get_grade.grade_title + item.class_name
            obj.value = item.id
            this.classOptions.push(obj)
          })
          res.data.school_year_info.map(item => {
            var obj = {}
            if (item.semester == 1) {
              obj.label = item.section + '上学期'
              obj.value = item.id + '+' + '1'
            } else {
              obj.label = item.section + '下学期'
              obj.value = item.id + '+' + '2'
            }
            this.yearOptions.push(obj)
            var date = new Date()
            var month = date.getMonth() + 1

          })
        })
    },
    search () {
      this.getInfo()
    }
  },
  created () {
    this.getInfo()
    this.getYearGradeInfo()
  }
}
</script>
<style>
  .el-main {
    padding: 0;
  }

  .middle {
    height: 100%;
    width: 100%;
    background-repeat: repeat;
    background-size: contain;
    background-position: center;
    background-attachment: fixed;
    z-index: -1;
  }

  .el-dialog__body {
    padding: 0 20px;
  }
</style>
<style lang="less" scoped>
  .middlebg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url(../../assets/image/bg-img.png) no-repeat center;
    background-size: 100%;
  }

  .top {
    height: 50px;
    line-height: 50px;
    background-color: #dbdbdb;
    position: relative;
    .teacher {
      display: inline-block;
      background: #00b02d;
      padding: 0 15px;
      color: #fff;
    }
    .addteacher {
      display: inline-block;
      background: #3A8EE6;
      height: 24px;
      line-height: 24px;
      position: absolute;
      right: 180px;
      top: 10px;
      padding: 3px 15px;
      font-size: 14px;
      border-radius: 5px;
      color: #fff;
      cursor: pointer;
    }
    .back {
      position: absolute;
      right: 0;
      background: #9cbf83;
      padding: 0 15px;
      border-radius: 3px;
      color: #fff;
      cursor: pointer;
    }
  }

  .box-card {
    margin: 30px 50px;
    .card {
      padding: 20px;
    }
    /deep/.cell {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      line-height: 25px;
      max-height: 25px;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .btn {
      width: 70px;
      height: 40px;
      margin-left: 30px;
    }
    .fenye {
      margin-top: 20px;
      text-align: center;
    }
    .record {
      .table {
        div {
          border-bottom: 1px solid #ccc;
          .left {
            display: inline-block;
            width: 6.25rem;
            height: 2.125rem;
            line-height: 2.125rem;
            text-align: right;
            padding-right: 10px;
            border-right: 1px solid #ccc;
          }
          .right {
            display: inline-block;
            width: 80%;
            height: 2.125rem;
            line-height: 2.125rem;
            color: #000;
            .name {
              padding-left: 100px;
            }
          }
        }

      }

    }
  }
</style>
